<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>系统用户分组</title>
  <script src="../../../static/kaige/js/szload.js"></script>
</head>

<body>
  <div class="kaige-body kaige-btn-radius">
    <div class="layui-row layui-col-space10 fenlanbox">
      <div class="layui-col-md6">
        <table class="layui-table" id="pageTable" lay-filter="pageTable" lay-size="sm"></table>
        <input type="hidden" name="keywordsCache" value="{}" />
        <input type="hidden" id="now_group_id" value="0" />
        <input type="hidden" id="now_group_name" value="" />
      </div>
      <div class="layui-col-md6">
        <table class="layui-table" id="itemTable" lay-filter="itemTable" lay-size="sm"></table>
      </div>
    </div>
  </div>
  <script>
    load_init_js(function () {
      layui.config({
        base: szoapcpath + '/static/kaige/layuiextend/'
      }).use(['kaige', 'tableSelect'], function () {
        var element = layui.element,
          layer = layui.layer,
          table = layui.table,
          form = layui.form,
          kaige = layui.kaige,
          dropdown = layui.dropdown,
          util = layui.util,
          tableSelect = layui.tableSelect,
          $ = layui.$,
          laytpl = layui.laytpl;
        form.render();

        //查看图片
        window.viewImage = function (imgUrl) { kaige.viewimage({ maxwidth: 600, maxheight: 600, url: imgUrl }); }

        kaige.table({
          elem: '#pageTable',
          height: 'full-25',
          url: "/sys.userGroup/index",
          id: 'pageTable',
          toolbar: '#dtoolbar1',
          defaultToolbar: [{ title: '添加分组', layEvent: 'dt-btn-add', icon: 'layui-icon-add-circle' }],
          cols: [[
            { field: 'id', title: 'ID', align: 'center', width: 70 },
            { field: 'name', title: '分组名称', align: 'center' },
            { field: 'group_name', title: '组长', align: 'center', width: 100 },
            { field: 'sort', title: '排序', align: 'center', width: 70 },
            { title: '操作', toolbar: '#dtrbar', align: 'center', width: 170, fixed: 'right' }
          ]]
        });

        var layuiRowClickNum = 0;
        //触发行双击事件
        table.on('rowDouble(pageTable)', function (obj) {
          $('.layui-table-click').removeClass('layui-table-click');
          $(obj.tr).addClass('layui-table-click');
          loaditem(obj.data);
        });

        function loaditem(data) {
          layuiRowClickNum++;
          if (layuiRowClickNum === 1) {
            if (data && data.id) {
              $('#now_group_id').val(data.id);
              table.reload('itemTable', {
                where: {
                  group_id: data.id,
                  page: 1
                }
              });
              $('#now_group_name').val(data.name);
            } else {
              layer.msg('请选择分组名称');
            }
          }
        }

        //列表-监听表头工具栏事件dtoolbar
        table.on('toolbar(pageTable)', function (obj) {
          //var checkStatus = table.checkStatus(obj.config.id);
          switch (obj.event) {
            case 'dt-btn-add':
              btnadd();
              break;
          }
        });

        //列表-监听单元格行工具事件dtrbar
        table.on('tool(pageTable)', function (obj) {
          var that = this;
          var data = obj.data;
          switch (obj.event) {
            case 'edit':
              baredit(data);
              break;
            case 'del':
              bardel(data);
              break;
            case 'childs':
              loaditem(data);
              break;
          }
        });


        //添加
        function btnadd() {
          kaige.form({
            url: "/sys.userGroup/add",
            data: {},
            encode: 1,// 进行编码 可以输空格，方过签名
            id: 'kaige',
            area: ['400px', '320px'],
            title: '<i class="layui-icon layui-icon-add-circle"></i> 添加 - 分组',
            tablelayid: 'pageTable',
            offset: ['100px', '100px'],
            overflow: false,
            callbefore: function (layero, index) {
              addeditform();
            }
          });
        }

        //编辑
        function baredit(d) {
          kaige.form({
            url: "/sys.userGroup/edit",
            data: { id: d.id },
            id: 'kaige',
            encode: 1,// 进行编码 可以输空格，方过签名
            area: ['400px', '320px'],
            title: '<i class="layui-icon layui-icon-edit"></i> 编辑 - 分组',
            tablelayid: 'pageTable',
            offset: ['100px', '100px'],
            overflow: false,
            callbefore: function (layero, index) {
              addeditform();
            }
          });
        }


        //删除
        function bardel(d) {
          layer.confirm('您确定删除吗？', {
            title: '<i class="layui-icon layui-icon-delete"></i> 删除确认',
            btn: ['确认', '取消']
          }, function () {
            $.post("/sys.userGroup/del", { id: d.id }, function (res) {
              res.status && table.reload('pageTable');
              layer.msg(res.msg);
            });
          });
        };

        function addeditform() {
          //组长
          tableSelect.render({
            elem: '#group_name',
            searchKey: 'keywords',
            checkedKey: 'id',
            table: {
              url: '/select/employee',
              cols: [[
                { type: 'radio' },
                { field: 'name', title: '姓名' },
                { field: 'dept_id_name', title: '部门' },
                { field: 'ranking_id_name', title: '职位' }
              ]],
              where: { automatch: 1 },
            },
            done: function (elem, data) {
              var od = data.data[0];
              elem.val(od.name);
              $('#group_uid').val(od.id);
            }
          });

        }

        kaige.table({
          elem: '#itemTable',
          height: 'full-25',
          url: "/sys.userGroup/groupuserlist",
          id: 'itemTable',
          toolbar: '#dtoolbar2',
          defaultToolbar: [{ title: '添加组人员', layEvent: 'dt-btn-add', icon: 'layui-icon-add-circle' }],
          cols: [[
            { field: 'gluser', width: 100, title: '用户名', align: 'center', templet: function (d) { return d.gluser ? d.gluser.un : '' } },
            { field: 'gluser', width: 100, title: '姓名', align: 'center', templet: function (d) { return d.gluser ? d.gluser.real_name : '' } },
            { field: 'gluser', width: 100, title: '部门', align: 'center', templet: function (d) { return d.gluser ? d.gluser.dept_id_name : '' } },
            { field: 'gluser', title: '职位', align: 'center', templet: function (d) { return d.gluser ? d.gluser.ranking_id_name : '' } },
            { field: 'id', title: '操作', toolbar: '#dtrbar1', align: 'center', width: 100, fixed: 'right' }
          ]],
          done: function (res, a, b) {
            // 阻止双击时冒泡
            setTimeout(function () {
              layuiRowClickNum = 0;
            }, 300);
            $('#table_head_title_right').html('【' + $('#now_group_name').val() + '】分组成员列表');
          }
        });

        //列表-监听表头工具栏事件dtoolbar
        table.on('toolbar(itemTable)', function (obj) {
          //var checkStatus = table.checkStatus(obj.config.id);
          switch (obj.event) {
            case 'dt-btn-add':
              btnadditem();
              break;
          }
        });

        //列表-监听单元格行工具事件dtrbar
        table.on('tool(itemTable)', function (obj) {
          var that = this;
          var data = obj.data;
          switch (obj.event) {
            case 'del':
              bardelitem(data);
              break;
          }
        });

        //添加
        function btnadditem() {
          kaige.form({
            url: "/sys.userGroup/groupuseradd",
            data: {},
            id: 'kaige_gu',
            encode: 1,// 进行编码 可以输空格，方过签名
            area: ['450px', '280px'],
            offset: '100px',
            title: '<i class="layui-icon layui-icon-add-circle"></i> 添加 - 分组人员',
            tablelayid: 'itemTable',
            overflow: false,
            callbefore: function (layero, index) {
              addedit2form();
              $("#sysgroup_name").val(getBracketStr($('#table_head_title_right').text()));
              $("#group_id").val($('#now_group_id').val());
            }
          });
        }

        function getBracketStr(text) {
          if(text == undefined || text == '' || text == null || text.indexOf('【') == -1) return '';
          var str = (text.match(/\【(.+?)\】/g))[0];
          return str.substring(1, str.length - 1)
        }

        //删除
        function bardelitem(d) {
          layer.confirm('您确定删除吗？', {
            title: '<i class="layui-icon layui-icon-delete"></i> 删除确认',
            btn: ['确认', '取消']
          }, function () {
            $.post("/sys.userGroup/groupuserdel", { id: d.id }, function (res) {
              res.status && table.reload('itemTable');
              layer.msg(res.msg);
            });
          });
        };

        function addedit2form() {
          if (parseInt($('#now_group_id').val()) < 1) {
            layer.closeAll();
            layer.msg('请在左侧选择一个分组');
          }

          $('#guform_group_id').val($('#now_group_id').val());

          //分组
          tableSelect.render({
            elem: '#sysgroup_name',
            searchKey: 'keywords',
            checkedKey: 'id',
            table: {
              url: '/sys.userGroup/index',
              cols: [[
                { type: 'radio' },
                { field: 'name', title: '分组名称' },
                { field: 'group_name', title: '组长' },
                { field: 'bn', title: '编号' }
              ]],
              where: { automatch: 1 },
            },
            done: function (elem, data) {
              var od = data.data[0];
              elem.val(od.name);
              $('#group_id').val(od.id);
            }
          });

          //成员
          tableSelect.render({
            elem: '#user_id_name',
            searchKey: 'keywords',
            checkedKey: 'id',
            table: {
              url: '/select/employee',
              cols: [[
                { type: 'radio' },
                { field: 'name', title: '姓名' },
                { field: 'dept_id_name', title: '部门' },
                { field: 'ranking_id_name', title: '职位' }
              ]],
              where: { automatch: 1 },
            },
            done: function (elem, data) {
              var od = data.data[0];
              elem.val(od.name);
              $('#user_id').val(od.id);
            }
          });
        }

      });
    });
  </script>
  <script type="text/html" id="dtrbar">
      <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="childs" title="查看组成员"><i class="fa fa-list-ul"></i></button>
        <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></button>
        <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
      </div>
  </script>
  <script type="text/html" id="dtrbar1">
    <div class="layui-btn-group">
      <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
    </div>
</script>
  <script type="text/html" id="dtoolbar1">
    <div class="table_head_title">系统用户分组列表</div>
  </script>
  <script type="text/html" id="dtoolbar2">
    <div class="table_head_title" id="table_head_title_right">分组人员</div>
  </script>

  <script type="text/html" id="kaige_form_html">
    <form class="kaige-body layui-form layui-form-pane" lay-filter="kaige_form_lay_filter">
      {{# if(d.id){ }}
      <input type="hidden" name="id" value="{{ d.id || '' }}" />
      {{# } }}
      <div class="layui-form-item">
        <label class="layui-form-label fl-red">分组名称</label>
        <div class="layui-input-inline">
          <input name="name" value="{{ d.name || '' }}" lay-verify="required" lay-reqtext="请输入分组名称" placeholder="分组名称" class="layui-input" type="text">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label fl-red">编号</label>
        <div class="layui-input-inline">
          <input name="bn" value="{{ d.bn || '' }}" class="layui-input" type="text">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label fl-red">组长</label>
        <div class="layui-input-inline">
          <input type="text" id="group_name" value="{{ d.group_name || '' }}" name="group_name" class="layui-input" />
          <input type="hidden" id="group_uid" value="{{ d.group_uid || '' }}" name="group_uid" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
          <input name="sort" value="{{ typeof(d.sort)==='number' ? d.sort: '100' }}" class="layui-input" type="number">
        </div>
      </div>
      <div class="layui-form-item layui-hide">
        <button class="layui-hide" lay-submit="" id="kaige_form_btn_save" lay-filter="kaige_form_btn_save">保存数据</button>
      </div>
    </form>
  </script>

  <script type="text/html" id="kaige_gu_form_html">
    <form class="kaige-body layui-form layui-form-pane" lay-filter="kaige_gu_form_lay_filter">
      {{# if(d.id){ }}
      <input type="hidden" name="id" value="{{ d.id }}" />
      {{# } }}
      <div class="layui-form-item">
        <label class="layui-form-label">选择用户</label>
        <div class="layui-input-inline">
          <input type="text" id="user_id_name" value='{{ d.user_id_name || '' }}' class="layui-input"  />
          <input type="hidden" id="user_id" value='{{ d.uid || '' }}' name="uid" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label fl-red">分组</label>
        <div class="layui-input-inline">
          <input type="text" id="sysgroup_name" value="{{ d.sysgroup_name || '' }}" class="layui-input" />
          <input type="hidden" id="group_id" value="{{ d.group_id || '' }}" name="group_id" />
        </div>
      </div>
      <div class="layui-form-item layui-hide">
        <button class="layui-hide" lay-submit="" id="kaige_gu_form_btn_save" lay-filter="kaige_gu_form_btn_save">保存数据</button>
      </div>
    </form>
  </script>
</body>

</html>